<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>操作当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="closeWindow()">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>商品图片</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>总价</li>
            <li>操作</li>
        </ul>
        <ul>
            <li><img src="images/dog.jpg"></li>
            <li>我和狗狗活下来了</li>
            <li>¥<input type="text" name="price" value="21.90" id="price1"></li>
            <li><input type="button" name="minus" value="-" onclick="minusNums_1()"><input type="text" id="n1" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plusNums_1()"></li>
            <li>¥<input type="text" name="total" id="zj_1"></li>
            <li><p  onclick="collection()">移入收藏</p><p onclick="del()">删除</p></li>
        </ul>
        <ul>
            <li><img src="images/mai.jpg"></li>
            <li>灰霾来了怎么办</li>
            <li>¥<input type="text" name="price" value="24.00" id="price2"></li>
            <li><input type="button" name="minus" value="-" onclick="minusNums_2()"><input type="text" name="amount" value="1" id="n2"><input type="button" name="plus" value="+" onclick="plusNums_2()"></li>
            <li>¥<input type="text" name="total" id="zj_2"></li>
            <li><p  onclick="collection()">移入收藏</p><p onclick="del_2()">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">商品总计：<span id="spzj"></span></li>
            <li><span onclick="tiaozhuan()">结 算</span></li>
        </ol>
    </div>
</div>
<script>
	window.onload=function (){
		getTotal_1();
		getTotal_2();
		spzj();
	}
	function closeWindow(){
		// alert(55);
		window.close();
	}
	function collection(){
		alert("收藏成功！")
	}
	function del(){
		if(confirm("确认删除？")){
			alert("删除成功");
			//数量和总价都归零代表删除成功
			guiling();
			spzj();
		}else{
			alert("取消删除");
		}
	}
	function del_2(){
		if(confirm("确认删除？")){
			alert("删除成功");
			//数量和总价都归零代表删除成功
			guiling_2();
			spzj();
		}else{
			alert("取消删除");
		}
	}
	function tiaozhuan(){
		window.location="https://www.baidu.com";
	}
	function minusNums_1(){
		// var n1 = document.getElementById("n1").value;
		document.getElementById("n1").value--;
		getTotal_1();
		spzj();
		// if(document.getElementById("n1").value<=0){
		// 	del();
		// }
	}
	function minusNums_2(){
		// var n1 = document.getElementById("n1").value;
		document.getElementById("n2").value--;
		getTotal_2();
		spzj();
		// if(document.getElementById("n1").value<=0){
		// 	del();
		// }
	}
	function plusNums_1(){
		document.getElementById("n1").value++;
		getTotal_1();		
		spzj();
	}
	function plusNums_2(){
		document.getElementById("n2").value++;
		getTotal_2();
		spzj();
	}
	//计算总价
	function getTotal_1(){
		var price = parseFloat(document.getElementById("price1").value);
		var  nums=parseInt(document.getElementById("n1").value);
		document.getElementById("zj_1").value=(price*nums).toFixed(2);
		
	}
	function getTotal_2(){
		var price = parseFloat(document.getElementById("price2").value);
		var  nums=parseInt(document.getElementById("n2").value);
		document.getElementById("zj_2").value=(price*nums).toFixed(2);
		
	}
	//删除时，把个数归零，总价也要跟着变化
	function guiling(){
		document.getElementById("n1").value=0;
		document.getElementById("zj_1").value=0;
	}
	function guiling_2(){
		document.getElementById("n2").value=0;
		document.getElementById("zj_2").value=0;
	}
	//商品总计
	function spzj(){
		var span =document.getElementById("spzj");
		span.innerHTML=
		// (parseFloat(document.getElementById("zj_1").value)+parseFloat(document.getElementById("zj_2").value)).toFixed(2);
		parseFloat(document.getElementById("zj_1").value)+parseFloat(document.getElementById("zj_2").value);
	}
</script> 
</body>
</html>